<template>
  <div class="location">
    <div class="fixed-bar" :style="{ paddingTop: navBarHeight + 'px' }"></div>
    <van-nav-bar
      fixed
      :zIndex="9999"
      placeholder
      custom-class="nav-bar"
      title-class="nav-bar-title"
    >
      <div
        slot="left"
        class="city-name"
        @click="chooseLocation"
        v-if="cityTitle"
      >
        <text class="location-icon"></text>
        <div class="name">{{ cityTitle }}</div>
        <van-icon name="arrow" />
      </div>
    </van-nav-bar>
    <div class="pic-box">
      <map
        class="map"
        id="map"
        :include-points="mapPoints"
        show-location
        :longitude="shopList[0].lng"
        :latitude="shopList[0].lat"
        :markers="markers"
      ></map>
      <div class="search">
        <div class="btn" @click="onSelectCity">
          <div class="text">{{ commonCity.name }}</div>
          <div class="icon"></div>
        </div>
        <a class="input" hover-class="none" url="/pages/shopSearch/shopSearch">
          <div class="icon"></div>
          <div>请输入商户名称</div>
        </a>
      </div>
      <div class="seat"></div>
    </div>

    <scroll-view class="list-box" scroll-y @scrolltolower="scrolltolower">
      <div
        class="item"
        v-for="(item, index) in shopList"
        :key="index"
        @click="toLink(item.id)"
      >
        <div class="pic">
          <img :src="item.logo" class="img-size-100 logo" mode="scaleToFill" />
          <div class="txt" :class="{ dis: item.business_status == 2 }">
            {{
              item.business_status == 1
                ? "营业中"
                : item.business_status == 0
                ? "未配置"
                : "已打烊"
            }}
          </div>
        </div>
        <div class="right-box">
          <div class="flex-box">
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="address">
                <div class="left">{{ item.address }}</div>
                <div class="right" v-if="item.distance != -1">
                  {{ item.distance }}
                </div>
              </div>
              <div class="tag" v-if="item.tag">
                <text class="tips">{{ item.tag }}</text>
              </div>
              <div class="txt time">营业时间{{ item.business_hours }}</div>
              <div class="txt" v-if="item.explain">“{{ item.explain }}”</div>
            </div>
            <div class="right-btn">
              <div class="btn navig" @click.stop="openLocation(item)">
                <div class="icon"></div>
                <div class="txt">导航</div>
              </div>
              <div class="btn phone">
                <div class="icon"></div>
                <div class="txt" @click.stop="makePhoneCall(item.tel)">
                  打电话
                </div>
              </div>
            </div>
          </div>

          <div class="amount-box" v-if="item.amount_user < 10">
            <text class="icon">惠</text>
            <text class="txt">{{ item.amount_user }}折</text>
          </div>
        </div>
      </div>
      <uni-load-more
        :status="status"
        :icon-size="12"
        :content-text="contentText"
        v-if="total > 3"
      />
    </scroll-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
import uniLoadMore from "@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue";
export default {
  components: {
    uniLoadMore
  },
  data() {
    return {
      mapPoints: [],
      latitude: 0,
      longitude: 0,
      cityTitle: "",
      navBarHeight: 0,
      isShow: false,
      shopList: [],
      markers: [],
      currentPage: 0,
      total: 10,
      pageSize: 15,
      status: "more",
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了"
      }
    };
  },
  watch: {
    latLng(val, oldVal) {
      console.log(val.toFixed(3));
      console.log(oldVal.toFixed(3));
      if (val.toFixed(3) != oldVal.toFixed(3)) {
        this.currentPage = 0;
        this.total = 10;
        this.getMerchantNear();
      }
    },
    commonCity() {
      this.currentPage = 0;
      this.total = 10;
      this.getMerchantNear();
    }
  },
  computed: {
    ...mapState(["commonCity"]),
    latLng() {
      return this.latitude + this.longitude;
    }
  },
  onLoad() {
    this.navBarHeight = uni.getSystemInfoSync().statusBarHeight + 44;
  },
  onShow() {
    this.currentPage = 0;
    this.total = 10;
    this.getLocation();
  },
  methods: {
    chooseLocation() {
      wx.chooseLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        success: res => {
          this.cityTitle = res.name;
          this.latitude = res.latitude;
          this.longitude = res.longitude;
        }
      });
    },
    getMerchantMapTitle() {
      this.$api
        .getMerchantMapTitle({ lat: this.latitude, lng: this.longitude })
        .then(res => {
          if (res.code == 200) {
            this.cityTitle = res.data.title;
          }
        });
    },
    scrolltolower() {
      this.getMerchantNear();
    },
    toLink(id) {
      uni.navigateTo({
        url: `/pages/shanghu/details?id=${id}`
      });
    },
    makePhoneCall(tel) {
      uni.makePhoneCall({
        phoneNumber: tel
      });
    },
    openLocation(item) {
      let { name, address, lng, lat } = item;
      wx.openLocation({
        name,
        address,
        latitude: Number(lat),
        longitude: Number(lng),
        fail: err => {
          console.log(err);
        }
      });
    },
    getLocation() {
      uni.getLocation({
        type: "gcj02",
        success: res => {
          let { longitude, latitude } = res;
          this.longitude = longitude;
          this.latitude = latitude;
          // this.getMerchantNear();
          this.getMerchantMapTitle();
        },
        fail: () => {
          wx.getSetting({
            success: res => {
              console.log(res);
              if (!res.authSetting["scope.userLocation"]) {
                uni.showModal({
                  title: "提示",
                  content: "该功能需要先获取您的位置",
                  confirmText: "好的",
                  success: res => {
                    if (res.confirm) {
                      wx.openSetting();
                    } else if (res.cancel) {
                      // this.show = false;
                    }
                  }
                });
              }
            }
          });
        }
      });
    },
    getMerchantNear() {
      if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
        this.status = "noMore";
        return;
      }
      this.status = "loading";
      this.$api
        .getMerchantNear({
          lat: this.latitude,
          lng: this.longitude,
          city: this.commonCity.id,
          pageSize: this.pageSize,
          page: this.currentPage + 1
        })
        .then(res => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.currentPage++;
            if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
              this.status = "noMore";
            } else {
              this.status = "more";
            }
            if (this.currentPage == 1) {
              this.shopList = [];
              this.mapPoints = [];
              this.markers = [];
              this.setMarkers(res.data.data);
            }
            this.shopList = this.shopList.concat(res.data.data);
          }
        });
    },
    setMarkers(list) {
      list.slice(0, 5).map((item, index) => {
        this.mapPoints.push({
          latitude: item.lat,
          longitude: item.lng
        });
        this.markers.push({
          iconPath: "https://media.wxcwy.com/mini/images/location.png",
          id: index,
          latitude: item.lat,
          longitude: item.lng,
          width: 40,
          height: 40,
          zIndex: 99,
          callout: {
            content: item.name + ">",
            color: "#343434",
            fontSize: 14,
            padding: 8,
            borderRadius: 2,
            textAlign: "center",
            display: "ALWAYS"
          }
        });
      });
      // this.moveToLocation(0);
    },
    moveToLocation(index) {
      const mapContext = wx.createMapContext("map", this);
      // mapContext.moveToLocation({
      //   longitude: this.shopList[index].lng,
      //   latitude: this.shopList[index].lat,
      // });
      // mapContext.includePoints()
      // mapContext.setCenterOffset({
      //   offset: [0.5, 0.7],
      //   fail(err) {
      //     console.log(err);
      //   },
      // });
    },
    onSelectCity() {
      uni.navigateTo({
        url: "/pages/addressIndex/addressIndex"
      });
    }
  }
};
</script>

<style lang="scss">
.location {
  font-size: 32rpx;
  overflow: hidden;
  .nav-bar {
    .city-name {
      color: #fff;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      .name {
        max-width: 350rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
      }
      .location-icon {
        width: 32rpx;
        height: 32rpx;
        display: block;
        background: url(https://media.wxcwy.com/mini/images/dwbl_white_icon@2x.png) no-repeat;
        background-size: 100%;
        margin-right: 4rpx;
      }
    }
    background: linear-gradient(
      270deg,
      rgba(44, 172, 255, 1) 0%,
      rgba(40, 123, 252, 1) 100%
    );
  }
  .nav-bar-title {
    color: #fff;
  }
  .pic-box {
    height: 480rpx;
    position: relative;
    .map {
      width: 100%;
      height: 100%;
    }
    .img-size-100 {
      display: block;
      width: auto;
      height: 100%;
    }
    .search {
      width: 690rpx;
      height: 68rpx;
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      background: #ffffff;
      box-shadow: 0 2rpx 10rpx 0 rgba(0, 0, 0, 0.2);
      border-radius: 30rpx;
      box-sizing: border-box;
      padding: 14rpx 0;
      display: flex;
      align-items: center;
      .btn {
        flex: 0 0 150rpx;
        border-right: 1px solid #e7e7e7;
        color: #494949;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          margin-left: 20rpx;
          flex: 0 0 25rpx;
          height: 25rpx;
          background: url(https://media.wxcwy.com/mini/images/dwxl_icon@2x.png) no-repeat center center;
          background-size: 100% 100%;
        }
      }
      .input {
        flex: 1;
        padding-left: 20rpx;
        display: flex;
        align-items: center;
        color: #b2b2b2;
        font-size: 26rpx;
        .icon {
          flex: 0 0 35rpx;
          height: 35rpx;
          background: url(https://media.wxcwy.com/mini/images/search_icon@2x.png) no-repeat center
            center;
          background-size: 100% 100%;
          margin-right: 12rpx;
        }
      }
    }
    .seat {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 20rpx;
      background: #fff;
      border-radius: 15rpx 15rpx 0 0;
    }
  }
  .list-box {
    height: calc(100vh - 480rpx - 88px);
    box-sizing: border-box;
    background: #f4f4f4;
    .item {
      padding: 20rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      background: #fff;

      display: flex;
      &:last-child {
        border: none;
      }
      .pic {
        flex: 0 0 160rpx;
        height: 160rpx;

        position: relative;
        .logo {
          border-radius: 10rpx 10rpx 0 0;
        }
        .txt {
          position: absolute;
          bottom: -20rpx;
          left: 0;
          width: 100%;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
          background: #028dff;
          color: #fff;
          font-size: 24rpx;
          border-radius: 0 0 10rpx 10rpx;
          &.dis {
            background: #999999;
          }
        }
      }
      .right-box {
        // display: flex;
        .amount-box {
          color: #ee4130;
          font-size: 26rpx;
          display: flex;
          line-height: 36rpx;
          border-top: 1px solid #e7e7e7;
          padding-top: 16rpx;
          .icon {
            background: rgba(238, 65, 48, 0.13);
            width: 36rpx;
            height: 36rpx;
            text-align: center;
            line-height: 36rpx;
            margin-right: 10rpx;
            // background-image: url(https://media.wxcwy.com/mini/images/dwbl_icon@2x.png);
          }
        }
        .flex-box {
          display: flex;
          .info {
            margin: 0 25rpx;
            flex: 0 0 370rpx;
            color: #787878;
            .name {
              color: #000000;
              font-size: 32rpx;
              font-weight: bold;
              line-height: 45rpx;
              margin-bottom: 20rpx;
            }
            .address {
              display: flex;
              align-items: center;
              .left {
                flex: 0 0 230rpx;
                font-size: 26rpx;
                line-height: 36rpx;
              }
              .right {
                height: 55rpx;
                line-height: 55rpx;
                margin-left: 16rpx;
                padding-left: 10rpx;
                flex: 0 0 100rpx;
                text-align: center;
                font-size: 24rpx;
                border-left: 1px solid #e7e7e7;
              }
            }
            .tag {
              margin: 10rpx 0;
              overflow: hidden;
              display: flex;
              .tips {
                height: 32rpx;
                border-radius: 6rpx;
                border: 1px solid #ff764f;
                color: #ff624f;
                font-size: 22rpx;
                padding: 0 10rpx;
              }
            }
            .txt {
              font-size: 24rpx;
              line-height: 32rpx;
              margin-bottom: 10rpx;
              &.time {
                margin-bottom: 10rpx;
              }
            }
          }
          .right-btn {
            flex: 0 0 130rpx;
            margin-top: 60rpx;
            .btn {
              display: block;
              width: 130rpx;
              height: 52rpx;
              line-height: 52rpx;
              text-align: center;
              margin-bottom: 35rpx;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 24rpx;
              background: linear-gradient(
                270deg,
                rgba(44, 172, 255, 1) 0%,
                rgba(40, 123, 252, 1) 100%
              );
              border-radius: 8rpx;
              color: #fff;
              .icon {
                margin-right: 6rpx;
              }
              &.navig {
                .icon {
                  width: 35rpx;
                  height: 34rpx;
                  background: url(https://media.wxcwy.com/mini/images/dh_icon@2x.png) no-repeat center
                    center;
                  background-size: 100% 100%;
                }
              }
              &.phone {
                background: #fff;
                border: 1px solid #1571ff;
                color: #1571ff;
                .icon {
                  width: 23rpx;
                  height: 28rpx;
                  background: url(https://media.wxcwy.com/mini/images/tel_icon@2x.png) no-repeat center
                    center;
                  background-size: 100% 100%;
                }
              }
            }
          }
        }
      }

      &.active {
        .pic {
          .txt {
            background: #999999;
          }
        }
      }
    }
  }
}
</style>
